<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下布医</title>
    <link  href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="/css/jquery.selectlist.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="/css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../layui/css/layui.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../demo/loading.css?cache=<%=Math.random()%>">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="../demo/loading.js"></script>
    <style>
        .title-row {
            line-height: 26px;
        }
        .title-row img {
            width: 12px;
            padding: 0 4px;
        }
        .content>div {
            margin-top: 30px;
        }
        .content span {
            margin-right: 5px;
            font-size: 18px;
        }
        input,textarea {
            width: 402px;
            padding: 10px;
            padding-left: 18px;
            background: url(../img/down.png) no-repeat right center;
            background-size: 30px;
            border: 1px solid #bec0c3;
        }
        textarea {
            vertical-align: top;
        }
        .submit {
            display: inline-block;
            font-size: 18px;
            padding: 6px 10px;
            background-color: #68cacb;
            color: #fff;
            border-radius: 5px;
            margin-left: 300px;
            margin-top: 40px;
            cursor: pointer;
        }
        #pic {
            width: 0;
            height: 0;
            opacity: 0;
        }
        label img {
            width: 85px;
            vertical-align: top;
            position: relative;
            left: -31px;
            cursor: pointer;
        }
        .right_cont_container {
            padding: 20px;
        }
        em {
            color: red;
        }
        .hospital-pull,
        .dept-pull{
            width: 400px;
            border: 1px solid #c1bebe;
            margin-left: 52px;
            border-top: none;
            max-height: 160px;
            overflow-y: scroll;
            display: none;
        }
        .hospital-pull div,
        .dept-pull div {
            line-height: 40px;
            text-indent: 20px;
            cursor: pointer;
        }
        .hospital-pull div:hover,
        .dept-pull div:hover {
            background-color: #efefef;
        }
        .block {
            display: block;
        }
        input:focus::-webkit-input-placeholder,
        textarea:focus::-webkit-input-placeholder{
            color:transparent;
        }
    </style>
</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <div class="message_hos_news_container">
            <!--右边导航下面内容-->
            <div class="right_cont_container">
                <div id="app">
                    <div class="title-row">
                        <span>重点科室</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>添加专科</span>
                    </div>
                    <div class="content">
                        <div class="hospital">
                            <span>医院<em>*</em></span>
                            <input type="text" v-model="hospital" class="hospital-input" placeholder="请选择医院" readonly="readonly">
                            <%--医院下拉列表--%>
                            <div class="hospital-pull" :class="{'block': showHos}">
                                <div class="hospital-name" v-for="data in dataList" @click="choiceHos(data.hospital.name)">{{data.hospital.name}}</div>
                            </div>
                        </div>
                        <div class="dept">
                            <span>科室<em>*</em></span>
                            <input type="text" v-model="dept" class="dept-input"  placeholder="请选择科室" readonly="readonly">
                            <%--科室下拉列表--%>
                            <div class="dept-pull" :class="{'block': showDept}">
                                <div class="dept-name" v-for="dept in deptList" @click="choiceDept(dept.deptName,dept.id)">{{dept.deptName}}</div>
                            </div>
                        </div>
                        <div class="logo">
                            <span>图片<em>*</em></span>
                            <label for="pic">
                                <input type="file" id="pic">
                                <img src="../img/add.png" v-if="hasImg">
                                <img :src="img" v-else>
                            </label>
                        </div>
                    </div>
                    <div class="submit" @click="sureAdd()">确认添加</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../layui/layui.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            dataList: [],
            hospital: "",
            dept: "",
            deptId: "",
            img: "",
            showHos: false,
            showDept: false,
            deptList: [],
            hasImg: true,
            img: ""

        },
        ready: function() {
            var _this = this;
            var flag = true;
            //
            //监听医院input框的输入事件
            $('.hospital-input').on('focus',function(e){
                e.stopPropagation;
                _this.showHos = true;
            });
//            $('.hospital-input').on('input',function() {
//                var hos = $(this).val();
//                if(hos == "") {
//                    vm.deptList = "";
//                    vm.dept = "";
//                    vm.deptId = "";
//                }
//            })

            //
            //获取医院输入框中的值====其实这个函数没啥用
//            $('.hospital').on('keyup',function(){
//                if(flag) {
//                    flag = false;
//                    setTimeout(function(){
//                        //console.log(_this.hospital);
//                        flag = true;
//                    },1000);
//                }
//            });
            //
            //监听科室输入框的输入事件
            $('.dept-input').on('focus',function(){
                _this.showDept = true;
                for(var i = 0; i < _this.dataList.length; i++) {
                    var hosname = _this.dataList[i].hospital.name;
                    if(_this.hospital == hosname) {
                        _this.deptList = _this.dataList[i].dept;
                        //console.log(_this.deptList);
                        //console.log(_this.hospital);
                    }
                }
            });
            //请求医院科室
            $.ajax({
                type: 'POST',
                url: "addDept.jsp",
                data: {
                    act: "dept_list",
                    hospital: "1070",
                },
                success: function (res) {
                    //console.log(res);
                    res = JSON.parse(res);
                    if(res.errcode == 0) {
                        //res.data.pop();   //最后一项是动态卫计委，没有具体科室，所以在此删除
                        _this.dataList = res.data;
                        //console.log(_this.dataList);
                    }
                }
            });
            //图片上传
            $('body').on("change","#pic",function() {
                var fileObj = document.getElementById("pic").files; // 获取文件对象
                //console.log(fileObj);
                fileUpLoadMulti(fileObj,function(res){
                    //console.log(res);
                    if(res.errcode == 0) {
                        _this.img = res.result[0];
                        _this.hasImg = false;
                    }
                });

            });
        },
        methods: {
            choiceHos: function(name) {
                this.hospital = name;
                this.showHos = false;
                this.deptList = [];
                this.dept = "";

            },
            choiceDept: function(name,id) {
                this.dept = name;
                this.showDept = false;
                this.deptId = id;
                //console.log(this.deptId);
            },
            sureAdd: function() {
                var _this = this;
                if(_this.hospital == "") {
                    layer.open({
                        title: '提示',
                        content: "请选择医院！"
                    })
                } else if (_this.dept == "") {
                    layer.open({
                        title: '提示',
                        content: "请选择科室！"
                    })
                } else if (_this.img == "") {
                    layer.open({
                        title: '提示',
                        content: "请上传专科图片！"
                    })
                } else {
                    eeesysLoading();
                    $.ajax({
                        type: 'POST',
                        url: "addDept.jsp",
                        data: {
                            act: "key_specialty",
                            hospital: "1070",
                            isType: "2",
                            state: "1",
                            deptId: _this.deptId,
                            deptIcon: _this.img

                        },
                        success: function (res) {
                            eeesysLoadingCancel();
                            //console.log(res);
                            res = JSON.parse(res);
                            if(res.errcode == 0) {
                                layer.open({
                                    title: '提示',
                                    content: "添加成功！",
                                    yes: function(index, layero) {
                                        window.locationHerf('deptList');
                                        layer.close(index);
                                    }
                                })
                            } else {
                                layer.open({
                                    title: '提示',
                                    content: res.errmsg
                                })
                            }
                        }
                    })
                }
            }
        }
    })

    var fileUpLoadMulti = function(files, then) {
        var form; // FormData对象
        var count = 0;
        var hasImg = false; // 判断有没有要传的图片，没有则主动调用图片
        if (files.length > 0) {
            hasImg = true;
            var xmlhttprequest;
            form = new FormData();
            form.append("act", "multi");

            var file = files[0];
            //console.log(file);
            //console.log(file.type);
            if(file.size > 10485760) {
                layer.open({
                    title: '提示',
                    content: "上传图片过大，请重新选择！"
                });
                return;
            };
            if(file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/png') {
                eeesysLoading();
                form.append("file[]", file);
                if (window.XMLHttpRequest) {
                    xmlhttprequest = new XMLHttpRequest();
                    if (xmlhttprequest.overrideMimeType) {
                        xmlhttprequest.overrideMimeType("text/xml");
                    }
                }
                xmlhttprequest.open("POST", "http://cloud.eeesys.com/pu/upload.php", true);
                xmlhttprequest.onreadystatechange = callback.bind(this);
                xmlhttprequest.send(form);
                function callback() {
                    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                        var res = JSON.parse(xmlhttprequest.responseText);
                        if (res.errcode == 0) {
                            eeesysLoadingCancel();
                            then && then(res);
                        } else {
                            layer.open({
                                title: '提示',
                                content: "上传失败！"
                            })
                        }
                    }
                }
            } else {
                layer.open({
                    title: '提示',
                    content: "只能上传图片！"
                })
            }
        } else {
            then();
        }
    }

    //点击空白处下拉列表消失
    $("body").click(function(e) {
        var target = e.target;
        var tc = target.className;
        //console.log(target);
        //console.log(tc);
        if(tc != "hospital-input" && tc != "dept-input") {
            vm.showHos = false;
            vm.showDept = false;
        }
    })
    layui.use('layer', function(){
        var layer = layui.layer;
    })
</script>